<template>
  <div class="flow-wrap">
    <div class="title-list">
      <div class="txt"></div>
      <el-divider content-position="center"
        >名称:{{ name }}-----序列号：{{ sn }}</el-divider
      >
    </div>
    <div class="show-title">
      <span>添加无票URL</span>
    </div>
    <el-form
      :inline="true"
      :model="ruleform"
      ref="form"
      :rules="rules"
      class="demo-form-inline ip-form"
    >
      <el-form-item label="协议" prop="ptl">
        <el-select v-model="ruleform.ptl" placeholder="请选择">
          <el-option label="RTSP" value="RTSP"></el-option>
          <el-option label="RTMP" value="RTMP"></el-option>
          <el-option label="HTTP-FLV" value="HTTP-FLV"></el-option>
          <el-option label="WS-FLV" value="WS-FLV"></el-option>
          <!-- <el-option label="HLS" value="HLS"></el-option> -->
        </el-select>
      </el-form-item>
      <el-form-item label="码流" prop="sub">
        <el-select v-model="ruleform.sub" placeholder="请选择">
          <el-option label="主码流" value="0"></el-option>
          <el-option label="子码流" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="通道号" prop="channel">
        <el-input
          v-model="ruleform.channel"
          style="width:130px"
          message
          placeholder="请输入数字"
        ></el-input>
      </el-form-item>
      <br />

      <br />
      <el-form-item>
        <el-button type="primary" plain @click="onSubmit('form')"
          >添加</el-button
        >
        <el-button type="warning" plain @click="onReset('form')"
          >重置</el-button
        >
      </el-form-item>
    </el-form>
    <div class="showUrl" v-if="stream != ''">URL: {{ stream }}</div>
  </div>
</template>

<script>
import { formatSeconds, tempToTime } from "@/utils/Tool";
import { getData, postData } from "@/request/http";
export default {
  name: "",
  components: {},
  props: {},
  data() {
    var checkNumber = (rule, value, callback) => {
      if (value != "") {
        if (/^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/.test(value) == false) {
          callback(new Error("请输入大于0的数字"));
        } else {
          callback();
        }
      } else {
        callback();
      }
      callback();
    };
    return {
      sn: "",
      name: "",
      ruleform: {
        ptl: "",
        sub: "",
        channel: 0
      },
      rules: {
        ptl: [{ required: true, message: "请输入协议", trigger: "blur" }],
        sub: [{ required: true, message: "请输入", trigger: "blur" }],
        channel: [
          { required: true, message: "请输入数字", trigger: "blur" },
          { validator: checkNumber, trigger: "blur" }
        ]
      },
      stream: ""
    };
  },
  computed: {},
  created() {},
  mounted() {
    this.sn = this.$route.query.sn;
    this.name = this.$route.query.name;
    
  },
  methods: {
    //添加 提交
    onSubmit(formName) {
      var that = this;

      that.$refs[formName].validate(valid => {
        if (valid) {
          postData("/adminweb/device/stream/live/url/ticket/no", {
            sn: that.sn,
            ptl: that.ruleform.ptl,
            sub: Number(that.ruleform.sub),
            channel: Number(that.ruleform.channel)
          })
            .then(res => {
              if (res.code == 0) {
                that.$message.success("添加成功！");
                that.stream = res.datas.stream;
              } else {
                that.$message.error(res.code + "，" + res.msg);
              }
            })
            .catch(res => {
              that.$message.error(res);
            });
        } else {
          that.$message.error("添加失败");
          return false;
        }
      });
    },
    // 重置
    onReset(val) {
      this.$refs[val].resetFields();
    }
  },
  watch: {}
};
</script>
<style scoped>
.flow-wrap {
  padding-top: 20px;
  padding-left: 30px;
  margin-bottom: 20px;
  border-radius: 4px;
  overflow: hidden;
  color: #303133;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  border: 1px solid #ebeef5;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  background: #fff;
}

.flow-wrap {
  padding-left: 30px;
}
.item {
  margin-top: 30px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.flow-wrap >>> .el-form--inline .el-form-item__content {
  display: block;
}
.flow-wrap >>> .el-radio {
  margin-top: 0;
}
/*title*/
.show-title {
  width: 100%;
  height: 40px;
  line-height: 40px;
  position: relative;
  background: #c0dee2;
  padding-left: 15px;
  font-size: 14px;
  margin: 6px 0 20px 0;
  border-radius: 12px 12px 0 0;
  font-weight: bold;
}

.show-title::before {
  content: "";
  width: 2px;
  height: 16px;
  background: #676a6d;
  position: absolute;
  top: 12px;
  left: 27px;
}

.show-title span {
  float: left;
  color: #676a6d;
  margin-left: 25px;
}
/* title显示名称id */
.flow-wrap >>> .table-wrap {
  border: none;
  box-shadow: none;
}
.flow-wrap >>> .el-divider__text.is-center {
  font-size: 17px;
}
.flow-wrap >>> .el-divider__text {
  background: #c0dee2;
  padding: 15px;
  border-radius: 8px;
}
.title-list {
  background: #fff;
  padding-left: 20px;
  height: 80px;
}
.title-list .txt {
  height: 10px;
}
.showUrl {
  width: 100%;
  height: 100px;
  line-height: 100px;
}
</style>
